<template>
  <div class="header">
    <slot />
    <div>
      <a-badge
        :count="8"
        :offset="[-13, 0]"
        :numberStyle="{
          height: '12px',
          borderRadius: '12px',
          minWidth: '12px',
          fontSize: '12px',
          lineHeight: '12px',
          padding: '0',
        }"
      >
        <a-icon style="padding-right: 15px" type="bell" />
      </a-badge>
      <a-dropdown style="display: inline-block">
        <div>
          | <a-icon style="padding-left: 15px" type="user" /><span
            class="header-username"
            >admin</span
          >
        </div>
        <a-menu slot="overlay" @click="localeChange">
          <a-menu-item>退出登录</a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    localeChange() {
      this.$router.push({ path: "/user/login" });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 16px;
  width: 100%;
  .header-username {
    padding-left: 10px;
  }
}
</style>
